<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "GridItem",
  props: {
    /** 规定单元格可横跨的列数 */
    colspan: {
      type: [Number, String],
      default: 1,
    },
    /** 规定单元格可横跨的行数 */
    rowspan: {
      type: [Number, String],
      default: 1,
    },
  },
});
</script>

<template>
  <div
    class="t-grid-item"
    :style="`grid-row: span ${rowspan} / span ${rowspan};grid-column: span ${colspan} / span ${colspan};`"
  >
    <slot />
  </div>
</template>

<style lang="scss">
.t-grid-item {
  display: inline-grid;
}
</style>
